<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline" style="">
      <el-form-item size="medium">
        <el-input v-model="userQuery.uname" placeholder="姓名" />
      </el-form-item>
      <el-form-item size="medium">
        <el-input v-model="userQuery.uphone" placeholder="手机号" />
      </el-form-item>

      <el-form-item label="添加时间">
        <el-date-picker
          v-model="userQuery.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
          size="medium"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="userQuery.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
          size="medium"
        />
      </el-form-item>

      <el-button
        type="primary"
        size="medium"
        icon="el-icon-search"
        @click="getUserList()"
      >查询</el-button
      >
      <el-button
        type="default"
        size="medium"
        @click="resetData()"
      >清空</el-button
      >
    </el-form>
    <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);padding: 1px 0  25px 0;height:auto">
      <p class="myp" style="border-bottom:1px solid #E8E8E8  ;padding-bottom:20px;margin-bottom:0px">&nbsp;&nbsp;&nbsp;&nbsp;用户列表
        <router-link :to="'/e/user/save/'">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            class="btn1" >添加</el-button>
        </router-link>

        <el-button
          type="danger"
          size="mini"
          icon="el-icon-delete"
          class="btn1"
          @click="removeDatas()"
      >批量删除</el-button></p>
      <el-table
        v-loading="listLoading"
        :data="list"
        :row-style="{ height: '65px' }"
        :cell-style="{ padding: '0px' }"
        element-loading-text="拼命加载中"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="40px"
        />
        <el-table-column label="序号" width="70" align="center">
          <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="uname" label="姓名" width="97" align="center"/>

        <el-table-column prop="uphone" label="手机号码" width="160" align="center"/>

        <el-table-column prop="password_d" label="登录密码" width="160" align="center"/>

        <el-table-column prop="identify" label="身份证" width="260" align="center"/>

        <el-table-column prop="createtime" label="创建时间" width="260" align="center"/>

        <el-table-column label="操作" width="auto" align="center">
          <template slot-scope="scope">
            <router-link :to="'/e/user/edit/' + scope.row.id">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
              >修改</el-button
              >
            </router-link>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="removeDataById(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :page-sizes="[5, 10, 20, 30]"
        :total="total"
        style="padding: 30px 0; text-align: center"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import user from '@/api/e/user/user'
export default {
  data() {
    return {
      listLoading: true, // 是否显示loading信息
      list: [], // 数据列表
      total: 0, // 总记录数
      page: 1, // 页码
      limit: 5, // 每页记录数
      userQuery: {}, // 查询条件
      ids: []
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    // 分页数据
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.limit = val
      this.getUserList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.getUserList()
    },
    // 查询所有数据
    getUserList() {
      console.log(this.userQuery)
      user.getUserListPage(this.page, this.limit, this.userQuery)
        .then((response) => {
          // 取消加载
          this.listLoading = false
          this.list = response.data.rows
          this.total = response.data.total
          this.list.forEach(element => {
            element.password_d = '******'
          })
          console.log('总记录数:' + this.list)
          console.log('total:' + this.total)
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 表单清空
    resetData() {
      this.userQuery = {}
    },
    // 通过Id删除
    removeDataById(id) {
      this.$confirm('此操作将永久删除该数据，是否继续？', '提示', {
        confirmButtonText: '确定',
        canncelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        user.removeById(id).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功！'
          })
          this.getUserList()
        })
      })
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
    },
    removeDatas() {
      const positionIds = this.ids
      console.log(positionIds)
      if (positionIds.length === 0) {
        this.$message({
          type: 'success',
          message: '请选择要删除的记录'
        })
      } else {
        this.$confirm('此操作将永久删除该数据，是否继续？', '提示', {
          confirmButtonText: '确定',
          canncelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          user.deletes(positionIds).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功！'
            })
            this.getUserList()
          })
        })
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

.btn1 {
  position: relative;
  right: -1020px;
  top: 2px;
}
</style>
